<template>
    <h3>传送门</h3>
    <button @click="modelOpen = true">open</button>
    <teleport to="body">
        <div v-if="modelOpen">
            我是传送门
            <button @click="modelOpen = false">close</button>
        </div>
    </teleport>
</template>

<script>
import { reactive, toRefs } from 'vue';

export default {
    setup () {
        const state = reactive({
            modelOpen: false,
        });
        return {
            ...toRefs(state),
        };
    },
};
</script>

<style>
</style>
